import { h, HtmlNodeModel, HtmlNode } from '@logicflow/core'

import Vue from 'vue'
import customHtml1 from './templates/customHtml1.vue'

/**
 * 根据内容计算盒子高度
 * @param {string} text 内容
 * @param {number} boxWidth 盒子宽度
 * @param {string} fontSize 字体大小
 * @param {number} lineHeight 行高
 * @returns number 高度
 */
function getBoxHeight(text, boxWidth, fontSize = '14px', lineHeight = '20px') {
  if (!text || !boxWidth) return 0
  /*  创建标签，加入到页面，获取currentWidth ,最后在移除 */
  const TemporaryTag = document.createElement('div')
  TemporaryTag.innerText = text
  TemporaryTag.style.width = boxWidth
  TemporaryTag.style.fontSize = fontSize // 设置字体大小
  TemporaryTag.style.lineHeight = lineHeight // 设置字体大小
  document.body.appendChild(TemporaryTag)
  const width = TemporaryTag.offsetHeight
  document.body.removeChild(TemporaryTag)
  return width
}

class UmlModel extends HtmlNodeModel {
  // 外边框 改为透明
  getOutlineStyle() {
    const style = super.getOutlineStyle()
    style.stroke = 'transparent'
    style.hover.stroke = 'transparent'
    return style
  }
  setAttributes() {
    this.text.editable = false // 禁止节点文本编辑
    // 设置节点宽高和锚点
    const width = 220
    const height = 50 // title基础高度

    let boxW = width - 2 * 2 - 10 * 2 + 'px' // 减去边框 和 padding
    let conH = getBoxHeight(this.properties.content, boxW)
    this.width = width
    this.height = height + conH
    this.anchorsOffset = [
      [this.width / 2, 0],
      [0, this.height / 2],
      [-this.width / 2, 0],
      [0, -this.height / 2],
    ]
  }
}
class UmlNode extends HtmlNode {
  getAnchorShape(anchorData) {
    const { x, y, type } = anchorData
    return h('rect', {
      x: x - 5,
      y: y - 5,
      width: 10,
      height: 10,
      className: 'custom-anchor',
    })
  }

  setHtml(rootEl) {
    const { properties, text, icon } = this.props.model
    const style = this.props.model.getNodeStyle()
    rootEl.style['box-shadow'] = '1px 2px 10px rgba(0, 0, 0, .1)'
    const el = document.createElement('div')
    // 需要先把之前渲染的子节点清除掉。
    rootEl.innerHTML = ''
    rootEl.appendChild(el) // 先加入父节点 然后项目进行挂载模版

    const MyComponent = Vue.extend(customHtml1)
    const instance = new MyComponent({
      // 传递 props
      propsData: {
        text: text.value,
        content: properties.content,
        icon,
        bgColor: style.bgColor,
        isNodeSelected: properties.isSelected,
      },
    })
    instance.$mount(el)
  }
}

export default {
  type: 'BaseNode',
  model: UmlModel,
  view: UmlNode,
}
